body {
    font-family: Arial, sans-serif;
    background-image: url("../images/bg_1.png");
    background-size: cover;
    background-position: center;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

main {
    background-color: rgba(255, 255, 255, 0.8);
    padding: 20px;   /* 内边距 */   
    border-radius: 8px; /* 圆角 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 阴影 */
    width: 300px; /* 宽度 */
}

h2 {
    text-align: center; /* 居中 */
    color: #333333; /* 颜色 */
}

form div {
    margin-bottom: 15px; /* 下边距 */
}

label {
    display: block; /* 块级元素 */
    margin-bottom: 5px; /* 下边距 */
    color: #555555; /* 颜色 */
}

input[type="text"],
input[type="password"] {
    width: 100%;
    padding: 8px; /* 内边距 */
    border: 1px solid #dddddd; /* 边框 */
    border-radius: 4px; /* 圆角 */
    box-sizing: border-box; /* 盒子模型 */
}

.captcha-container {
    display: flex; /* 弹性布局 */
    align-items: center; /* 垂直居中 */
}

.captcha-container input {
    flex: 1; /* 弹性布局 */
    margin-right: 10px; /* 右边距 */
}

.captcha-container img {
    width: 100px; /* 宽度 */
    height: 50px; /* 高度 */
    cursor: pointer; /* 鼠标指针 */
}

.captcha-container p {
    font-family: Arial, sans-serif;
    font-size: 10px; /* 字体大小 */
    color: #007bff; /* 颜色 */
    margin: 0; /* 外边距 */
    cursor: pointer; /* 鼠标指针 */
    text-align: right; /* 右对齐 */
    flex: 1; /* 弹性布局 */
}

button {
    width: 100%; /* 宽度 */
    padding: 10px; /* 内边距 */
    background-color: #007bff; /* 背景颜色 */
    color: #ffffff; /* 颜色 */
    border: none; /* 边框 */
    border-radius: 4px; /* 圆角 */
    cursor: pointer; /* 鼠标指针 */
    font-size: 16px; /* 字体大小 */
    transition: background-color 0.3s ease; /* 过渡 */
}

button:hover {
    background-color: #0056b3; /* 背景颜色 */
}

#error {
    color: red; /* 颜色 */
    font-size: 16px; /* 字体大小 */
    margin-top: 5px; /* 上边距 */
    display: none; /* 隐藏 */
    opacity: 1; /* 不透明度 */
    transition: opacity 0.3s ease; /* 过渡 */
}

.loading {
    position: relative; /* 相对定位 */
    pointer-events: none; /* 禁用事件 */
}

.loading::after {
    content: ''; /* 内容 */
    position: absolute; /* 绝对定位 */
    width: 16px; /* 宽度 */
    height: 16px; /* 高度 */
    top: 0; /* 上边距 */
    left: 50%; /* 左边距 */
    margin-left: -8px; /* 左边距 */
    margin-top: -8px; /* 上边距 */
    border: 2px solid #ffffff; /* 边框 */
    border-radius: 50%; /* 圆角 */
    border-top-color: transparent; /* 上边框颜色 */
    animation: spin 1s linear infinite; /* 动画 */
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.message-box {
    display: none;
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    animation: slideIn 0.3s ease-out;
}

.message-content {
    background-color: #fff3cd;
    color: #856404;
    padding: 15px 40px 15px 20px;
    border-radius: 4px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
    position: relative;
    border-left: 4px solid #ffc107;
}


@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
} 